<template>
  <div v-loading="loading" class="iframe-content">
    <div
      :style="{ 'vertical-align': 'top', height: minHeight + 20 + 'px' }"
      class="iframe-view"
    >
      <iframe
        id="myframe"
        name="myframe"
        :src="src"
        frameborder="0"
        scrolling="auto"
        width="100%"
        height="100%"
      />
    </div>
  </div>
</template>
<script>
import PostMessageUtils from "@/utils/postMessageUtils.js";
export default {
  name: "IframePage",
  props: {
    // 非页面使用
    transData: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    return {
      // iframe的最小高度
      minHeight: 800,
      loading: false,
      data: {},
      // src:""
    };
  },
  computed: {
    src() {
      let finalUrl = this.data.hostName + this.data.url;
      console.log(this.data.hostName);
      const queryData = this.$route.query;
      if (queryData.proxyUrl) {
        for (let item in queryData) {
          if (item == "proxyUrl") continue;
          finalUrl = finalUrl + `&${item}=${queryData[item]}`;
        }
      }
      return finalUrl;
    },
  },
  watch: {
    // 非页面组件的配置项
    transData: {
      handler(v) {
        this.loading = true;
        this.data = JSON.parse(JSON.stringify(v));
        this.postMessage4PageInfo();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.postMessage4PageInfo();
    }
    window.addEventListener("message", this.setConfig);
    window.scrollTo(0, 0);
  },
  methods: {
    postMessage4PageInfo() {
      //父页面向子iframe页面发送消息
      setTimeout(() => {
        PostMessageUtils.autoPostMessageByPoll(
          this.data.hostName,
          document.getElementById("myframe").contentWindow
        );
      }, 1e3);
    },
    setConfig(e) {
      const myframe = document.getElementById("myframe");
      console.log(e)
      if (!myframe) return;
      if (e.data === "ready") {
        this.loading = false;
        myframe.contentWindow.postMessage(
          {
            event: "LOAD_SCRIPT",
            src: this.data.js || this.defaultJs,
          },
          "*"
        );
        myframe.contentWindow.postMessage(
          {
            event: "LOAD_STYLE",
            src: this.data.css || this.defaultCss,
          },
          "*"
        );
      }
      if (e.data.event === "SET_HEIGHT") {
        this.loading = false;
        // 如果这次的页面信息和上次不同  则开始postmessage
        if (this.data != this.lastData) {
          this.lastData = this.data;
          // PostMessageUtils.clearPollInterval();
        }
        if (this.minHeight == e.data.height) return;
        this.minHeight = e.data.height;
      }
    },
  },
};
</script>
<style lang="scss" scope>
.iframe-content {
  min-height: 400px;
  position: relative;
  margin-top: 60px;
  &.no-padding {
    margin: -16px;
  }
  .breadcrumb-block {
    padding-bottom: 0px;
    position: absolute;
    left: 16px;
    background: #f0f6fa;
    top: 16px;
  }
}

.iframe-view {
  min-height: calc(100vh - 60px);
}
</style>
